<template>
	<view class="body">
		<view class="back" style="padding-bottom: calc(1vh);">
			<view>
				<view style="display: inline-block;">
					<text>推广方式</text>
				</view>
				<view style="width: 50%;margin-bottom: calc(1vh);display: inline-block;">
					<xfl-select :list="list" :clearable="false" :style_Container="'height: 30px; font-size: 16px;'" :placeholder="'请选择平台'"
					 :initValue="'请选择平台'" :selectHideType="'hideAll'" @change="bindPickerChange" style="width: 100%;">
					</xfl-select>
				</view>
			</view>
			<view>
				<view style="display: inline-block;">
					<text>选择账号</text>
				</view>
				<view style="width: 50%; display: inline-block;">
					<!-- <xfl-select :list="account" :clearable="false" :style_Container="'height: 30px; font-size: 16px;'" :placeholder="'请选择平台'"
					 :initValue="'请选择平台'" :selectHideType="'hideAll'" @change="bindAccountChange" style="width: 100%;">
					</xfl-select> -->
					<checkbox-group @change="checkAccountChange">
						<label style="display: inline-block" class="uni-list-cell uni-list-cell-pd" v-for="item in account" :key="item.value">
							<view style="display: inline-block">
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view style="display: inline-block">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
			</view>
			<!-- <view class="body" style="margin-top: calc(2vh);height: calc(19vh); border-radius: calc(1vw);margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);">
				<view>
					<text class="text">您的粉丝数为</text>
					<text style="float: right;margin-right: calc(2vw);">0</text>
					<view class="body-border"></view>
				</view>
				<view>
					<text class="text">进行中样品数为</text>
					<text style="float: right;margin-right: calc(2vw);">0</text>
					<view class="body-border"></view>
				</view>
				<view>
					<text class="text">剩余可领取样品数为</text>
					<text style="float: right;margin-right: calc(2vw);">0</text>
					<view class="body-border"></view>
				</view>
			</view> -->
		</view>
		<view class="body-data back">
			<view v-if="isShow">
				<checkbox-group @change="checkAddressChange">
					<label style="display: inline-block" class="uni-list-cell uni-list-cell-pd" v-for="item in address" :key="item.value">
						<view style="display: inline-block">
							<checkbox :value="item" :checked="item.checked" />
						</view>
						<view style="display: inline-block">{{item}}</view>
					</label>
				</checkbox-group>
				<button type="default" style="background-color: #FFFFFF;" @click="changeNewAddr">更改地址</button>
				<!-- <radio value="address"  />{{address.address}}{{address.name}}{{address.phone}} -->
			</view>
			<view v-else>
				<button type="default" style="width: 100%;background-color: #FFFFFF;" @click="toAddress">添加地址</button>
			</view>
		</view>
		<view class="body-data back">
			<view style="margin: calc(2vw);">
				<!-- <image src="../../static/logo.png" style="width: calc(9vw);height: calc(5vh);"></image> -->
				<text style="padding-left: calc(1vw);vertical-align: top;">{{goodsDetial.shopName}}</text>
			</view>
			<view>
				<view style="display: inline-block;margin: calc(2vw);">
					<image :src="goodsDetial.image" style="width: calc(19vw);height: calc(13vh);"></image>
				</view>
				<view style="display: inline-block;vertical-align: top;width: calc(55vw);">
					<view>{{goodsDetial.name}}</view>
					<view style="margin-top: calc(5vh);">￥{{goodsDetial.price}}</view>
				</view>
			</view>
			<view>
				<text style="float: left;">佣金</text>
				<text style="float: right;">￥{{goodsDetial.commission}}</text>
			</view>
			<view style="border: #E5E5E5 solid 1rpx"></view>
			<view>
				<text style="float: left;">商品类目</text>
				<text style="float: right;">{{goodsDetial.categoryName}}</text>
			</view>
		</view>
		<view class="body-data back">
			<view style="margin: calc(1vh) 0;">
				<text style="display: inline-block;font-weight: 700;">活动开始时间:</text>
				<view class="cell" @click="startSelectDatePicker" style="display: inline-block;">
					<view class="cell-title " v-if="start">
						{{startDetail}}
					</view>
					<view class="cell-title">
						{{startDateString}}
					</view>
				</view>
				<jpTimePicker ref='start-date-time' :datestype="type" :datestring='startDateString' @change='startDateTimeChange'></jpTimePicker>
			</view>
			<view style="margin: calc(1vh) 0;">
				<text style="display: inline-block;font-weight: 700;">活动结束时间:</text>
				<view class="cell" @click="endSelectDatePicker" style="display: inline-block;">
					<view class="cell-title " v-if="end">
						{{endDetail}}
					</view>
					<view class="cell-title">
						{{endDateString}}
					</view>
				</view>
				<jpTimePicker ref='end-date-time' :datestype="type" :datestring='endDateString' @change='endDateTimeChange'></jpTimePicker>
			</view>
		</view>
		<view class="body-data back">
			<view>
				<text style="font-size: calc(3vh);font-weight: 700;">申请备注</text>
			</view>
			<!-- <view style="background-color: #E6E6E6;border-radius: calc(1vw);height: calc(15vh);margin-bottom: calc(1vh);">
				<textarea name="textarea" rows="50" @blur="bindTextAreaBlur" placeholder="请输入备注" style="width: 100%;" auto-height />
			</view> -->
			<textarea id="story" name="story" rows="30" cols="50" placeholder="请输入备注" style="background-color: #E6E6E6;border-radius: calc(1vw);height: calc(15vh);margin-bottom: calc(1vh);width: 100%;"></textarea>
		</view>
		<view class="body-data back" style="vertical-align: bottom;">
			<button type="primary" style="background-color: #FFA500;border-radius: calc(7vw);width: 100%;height: calc(7vh);" @click="addInfo">提交订单</button>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	import helangCheckbox from "@/components/helang-checkbox/helang-checkbox.vue"
	import jpTimePicker from '@/components/jp-timePicker/jp-timePicker.vue'
	export default {
		onShow:function() {
			// province city area  details name phone
			// let result = this.addr
			// let resultAddress = result.province+result.city+result.area+result.details+result.name+result.phone
			// this.phone = result.phone
			// this.address.push(resultAddress)
			// console.log('1231',this.addr)
			this.getAddr()
		},
		onLoad: function(options) {
			this.user.id = options.id;
			this.user.userId = options.userId;
			this.getGoodsChoiceById()
			this.getAccount()
			this.getAddressInfo()
			this.getAddressList()
			// this.getAddr()
			console.log(options)
		},
		components: {
			xflSelect,
			"helang-checkbox":helangCheckbox,
			jpTimePicker
		},
		data() {
			return {
				start:true,
				end:true,
				startDateString: '',
				endDateString: '',
				type: 'year',
				startDetail: '请选择开始时间',
				endDetail: '请选择结束时间',
				isShow: false,
				addr:{},
				value: '',
				address: [],
				user:{},
				phone: "",
				goodsDetial:{},
				account: [],
				checkboxAccount:[],
				checkboxAddress:"",
				list: [{
						label: '抖音短视频',
						value: '抖音短视频'
					},
					{
						label: '直播',
						value: '直播'
					},
					{
						label: '抖音短视频+直播',
						value: '抖音短视频+直播'
					}
				]
			}
		},
		methods: {
			startSelectDatePicker() {
				this.$refs['start-date-time'].show();
			},
			startDateTimeChange(value) {
				this.startDateString = value
				this.start = false
			},
			endSelectDatePicker() {
				this.$refs['end-date-time'].show();
			},
			endDateTimeChange(value) {
				this.endDateString = value
				this.end = false
			},
			checkAccountChange(e){
				this.checkboxAccount = e.detail.value
				console.log(this.checkboxAccount)
			},
			checkAddressChange(e){
				e.detail.value.forEach((item,index)=>{
					this.checkboxAddress = item
					console.log('add',this.checkboxAddress)
				})
			},
			getAccount(){
				this.$http({
					url: '/base/douyin/bind/info/list',
					method: 'GET',
				}).then(res => {
					console.log(res.data.data)
					res.data.data.forEach((item,index)=>{
						let accountInfo= {
							value: item.nickname,
							name: item.nickname
						}
							this.account.push(accountInfo);
					})
				});
			},
			getAddr(){
					this.address = []
					let result = this.addr
					let resultAddress = result.province+result.city+result.area+result.details+result.name+result.phone
					this.phone = result.phone
					this.address.push(resultAddress)
					console.log('123',this.addr)
			},
			getAddressInfo(){
				this.$http({
					url: '/address/default/info',
					method: 'GET',
				}).then(res => {
					this.address = []
					if(res.data.data == undefined){
						this.$http({
							url: '/address/info/list',
							method: 'GET',
						}).then(res => {
							let result = res.data.data[0];
							let resultAddress = result.province+result.city+result.area+result.details+result.name+result.phone
							this.phone = result.phone
							this.address.push(resultAddress)
						})
					}else{
						let result = res.data.data;
						let resultAddress = result.province+result.city+result.area+result.details+result.name+result.phone
						this.phone = result.phone
						this.address.push(resultAddress)
					}
				});
			},
			getAddressList(){
				this.$http({
					url: '/address/info/list',
					method: 'GET',
				}).then(res => {
					if(res.data.data.length == 0){
						this.isShow = false
					}
					if(res.data.data.length != 0){
						console.log(res.data.data.length)
						this.isShow = true
					}
				});
			},
			addInfo(){
				this.$http({
					url: '/order/save',
					method: 'POST',
					data:{
						goodsId:this.goodsDetial.id,
						goodsUrl:this.goodsDetial.goodsUrl,
						phone:this.phone,
						userId: this.user.userId,
						shopName:this.goodsDetial.shopName,
						title:this.goodsDetial.name,
						characteristic:this.checkboxAddress,
						price:this.goodsDetial.price,
						accountNameList:this.checkboxAccount,
						model:this.model,
						message:this.message,
						start: this.startDateString,
						end:this.endDataString,
						img:this.goodsDetial.image
					}
				}).then(res => {
					console.log('res',res)
					if(res.data.code == 200){
						uni.navigateTo({
							url: "/pages/goods/goodsDetails?id=" + this.user.id + "&userId=" + this.user.userId
						})
					}else{
						uni.showToast({
							title: '领取样品失败，请重新添加',
							duration: 2000
						});
					}
					if(res.data.code == 500){
						uni.showToast({
							title: "抖音授权过期，请到抖音授权页面，重新授权",
							duration: 3000
						});
					}
				});
			},
			getGoodsChoiceById() {
				this.$http({
					url: '/goods/getGoodsChoiceById/' + this.user.id,
					method: 'GET',
				}).then(res => {
					this.goodsDetial = res.data.data;
					console.log(res.data.data)
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.newVal)
				this.model = e.newVal
			},
			bindTextAreaBlur: function (e) {
				this.message = e.detail.value
				console.log(e.detail.value)
			},
			toAddress(){
				uni.navigateTo({
					url: "/pages/homechild/address/address?userId="+this.user.userId+"&isChecked=true"
				})
			},
			changeNewAddr(){
				uni.navigateTo({
					url: "/pages/homechild/address/address?userId="+this.user.userId+"&isChecked=true"
				})
			}
		}
	}
</script>

<style>
	.body {
		background-color: #F1F1F1;
		height: 100%;
	}

	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.picker-date {
		float: right;
		padding: 0 5px;
		width: 35%;
		height: 30px;
		line-height: 30px;
		background-color: #F7F7F7;
		border-radius: 5px;
		color: #C9C9C9;
	}

	.back {
		background-color: #FFFFFF;
	}

	.body-border {
		border: #CCCCCC solid 1rpx;
		width: 93%;
		margin: calc(1vh) 0 calc(1vh) calc(3vw);
	}

	.text {
		font-size: calc(2vw);
		font-weight: 500;
		padding: calc(2vh) 0 0 calc(2vw);
	}
</style>
